<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>发布商品</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
          body{

            height:100%;
            padding-top:40px;
          }
          *{font-size:9pt;border:0;margin:0;padding:0;}
          body{font-family:'微软雅黑'; margin:0 auto;}
          ul,li{display:block;margin:0;padding:0;list-style:none;}
          .top{
            width: 100%;
            height:40px;
            background-color: #fcfcfc;
          }
          .leftreturn{
            width:25px;
            height:25px;
            margin:7.5px;
            float: left;
          }
          button{
            outline: none;
          }
          .header{ width:100%;height:100px;text-align:center;}
          .header img{width:100px; height:100px;border-radius: 50px;border: none;margin:0px auto;}
          .table1{width:100%;border:0; cellspacing:0; cellpadding:0; }
          .table1 tr td{padding:0px;}
          .td1{width:30%;font-size: 16px;height:35px;line-height: 35px;margin-right: 50px;border-bottom:solid 1px #ced9df;}
          .td2{width:70%;font-size: 14px;height:35px;border-bottom:solid 1px #ced9df;line-height: 35px;}
          input{
            outline: none;
            border:0px;
            height:30px;
            width:90%;
            float:right;
            color:#000;
          }
      </style>
  </head>
  <body>
    <div class="top">
      <img src="../../image/leftreturn.png" alt="" class="leftreturn" onclick="returnframe3();">
    </div>
    <div class="content" id="content">asdasdas</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/SHA1.js"></script>
  <script type="text/javascript" src="../../script/doT.min.js"></script>
  <script type="text/x-dot-template"id="tmpl-3">
  <ul class="address_list">
  <div class="header"><button onclick="showAction()" id="cimage">
  {{? it[0].Headpicture!=null}}
  <img src="{{=it[0].Headpicture.url}}" alt="" id="headpicture">
  {{??}}
    <img src="../../image/sxlogo.png" alt="" id="headpicture">
  {{?}}
  <img src="" alt="" id="image" style="display:none">
  </botton></div>
    <div class="main">
      <table class="table1">
        <tr>
          <td  class="td1">&nbsp&nbsp昵称</td>
          <td   class=td2><input type="text" id="username"  value="{{=it[0].username}}" ></td>
        </tr>
        <tr>
          <td  class="td1">&nbsp&nbsp电话号码</td>
          <td   class=td2><input type="telephone" id="mobile"  value="{{=it[0].mobile}}" ></td>
        </tr>
        <tr>
          <td  class="td1">&nbsp&nbsp邮箱</td>
          <td   class=td2><input type="email" id="email"  value="{{=it[0].email}}" ></td>
        </tr>
      </table>
      <span style="font-size:16px;margin-left:200px" onclick="editinfor()">点击修改信息</span>
    </div>
  </script>
  <script type="text/javascript">

  apiready=function(){
      init();
      init_listenevent();
  }

function init(){
  var user = $api.getStorage('user');
  //使用doT模板将用户信息放入html中
  // 编译模板函数
  tmpltxt=doT.template(document.getElementById("tmpl-3").innerHTML);//生成模板方法
  document.getElementById("content").innerHTML=tmpltxt(user);//数据渲染
}
      //选择图片
function showAction() {
     api.actionSheet({
         title: '上传图片',
         cancelTitle: '取消',
         buttons: ['拍照', '从手机相册选择']
     }, function(ret, err) {
         if (ret) {
             getPicture(ret.buttonIndex);
         }
     });
 }
//从手机上传图片
 function getPicture(sourceType) {
    if (sourceType == 1) { // 拍照
        api.getPicture({
            sourceType: 'camera',
            encodingType: 'jpg',
            mediaValue: 'pic',
            allowEdit: false,
            destinationType: 'url',
            quality: 100,
            targetWidth: 200,
            targetHeight: 200,
            saveToPhotoAlbum: true
        }, function(ret, err) {
            if(ret){
                cimage=ret.data;
                api.sendEvent({
                    name: 'rechange_image',
                    extra: {
                        image: cimage
                    }
                });

            }
        });
    } else if (sourceType == 2) { // 从相机中选择
        api.getPicture({
            sourceType: 'library',
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            quality: 100,
            targetWidth: 200,
            targetHeight: 200
        }, function(ret, err) {
            if(ret){
                cimage=ret.data;
                api.sendEvent({
                    name: 'rechange_image',
                    extra: {
                        image: cimage
                    }
                });
            }
        });
    }else{
        return;
    }
}

function init_listenevent(){
  api.addEventListener({
      name: 'rechange_image'
  }, function(ret, err){
      if( ret ){
           var image=document.getElementById("image");
           var headpicture =document.getElementById("headpicture");
           image.src=ret.value.image;
           image.style.display='block';
           headpicture.style.display='none';
      }
  });

 api.addEventListener({
     name: 'updateuser'
 }, function(ret, err){
     if( ret ){
       //使用doT模板将用户信息放入html中
       // 编译模板函数
       tmpltxt=doT.template(document.getElementById("tmpl-3").innerHTML);//生成模板方法
       document.getElementById("content").innerHTML=tmpltxt(ret.value.user);//数据渲染
     }else{
          alert("数据库连接失败");
     }
 });

}

function editinfor(){
    user =$api.getStorage("user");
    username=document.getElementById("username").value;
    mobile=document.getElementById("mobile").value;
    email=document.getElementById("email").value;

    //获取X-APICloud-AppKey值
    var now = Date.now();
   appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now

    api.ajax({
      url: 'https://d.apicloud.com/mcm/api/file',
      method: 'post',
      headers:{
        "X-APICloud-AppId": "A6032422409194",
        "X-APICloud-AppKey": appKey
      },
        data: {
            files: {
                file: cimage
            }
        }
    },function(ret, err){
        if (ret) {
            $api.setStorage('image', ret);
        } else {
            alert("数据库连接失败");
        }
    });

      image = $api.getStorage('image');
      var file={
          id: image.id,
          name: image.name,
          url: image.url
    }

    api.ajax({
      url:"https://d.apicloud.com/mcm/api/user/"+user[0].id,
      method: 'post',
      cache: false,
      headers:{
        "X-APICloud-AppId": "A6032422409194",
        "X-APICloud-AppKey": appKey
      },
      data: {
          values: {//上传参数
            "Headpicture":file,
            "username":username,
            "email":email,
            "mobile":mobile,
            "_method":"PUT"
          }
      }
    },function(ret, err){
        if (ret) {
              alert("修改成功");
              var user = $api.getStorage('user');
              user[0].username=ret.username;
              user[0].mobile=ret.mobile;
              user[0].email=ret.email;
              user[0].Headpicture=ret.Headpicture;
              $api.setStorage('user', user);

              api.sendEvent({
                  name: 'updateuser',
                  extra: {
                      user: user
                  }
              });

              // returnframe3()
        } else {
            alert("数据库连接失败");
        }
    });
}

  function returnframe3() {
    api.closeWin();
    }
  </script>
  </html>
